<template>
  <div class="box">
    <div class="header">
      <span>嗨购秒杀</span>
      <span>10点场</span>
      <span class="CountDown">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </span>
      <span>10点场</span>
    </div>
    <ul class="list">
      <li v-for="item in imgs" :key="item.proid">
        <img :src="item.img1" >
        <p>{{item.originprice}}</p>
      </li>

    </ul>

  </div>
</template>
<script>
export default {
  data() {
    return {
      time: 2 * 60 * 60 * 1000,
      imgs:[]
    }
  },
  created(){
    this.$http.get('/pro/seckilllist',{
      params:{
        const:1,
        limitNum:3
      }
    }).then(res=>{
       if(res.data.code==="200"){
        this.imgs=res.data.data
       }
    })
  }
}
</script>

<style scoped>
.box {

  width: 100%;
  height: 8.125rem;
  /* background-color: skyblue; */
}

.header {
  width: 100%;
  height:2.5rem;
  /* border: 1px solid black; */
  display: flex;
  justify-content:space-around;
  align-items: center;
  background: url() no-repeat center center;
  background-size: cover;
}
.header span{
  font-size: 16px;
}
.header .CountDown {
  width: 140px;
}

.list {
  width: 100%;
  height: 5.625rem;
  /* border: 1px solid black; */
  background-color: antiquewhite;
  display: flex;
}
.list img{
  width: 3.75rem;
  height: 3.75rem;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
</style>